"use client";
import { useEffect, useState } from "react";
import { useParams, useNavigate } from "react-router-dom";
import { NavBar } from "antd-mobile";
import axios from "axios";

// 定义数据类型
export type Medicine = {
   id: string;
   name: string;
   price: number;
   description: string;
   image: string;
   category: string;
   brand: string;
   dosage: string;
   ingredients: string;
   sideEffects: string;
   storage: string;
   expiryDate: string;
 };

export default function Xiangq() {

   const [medicines, setMedicines] = useState<Medicine[]>([]);
   const getMedicines = async () => {
     const res = await axios.get("http://localhost:3000/medicines");
     setMedicines(res.data.medicines);
     console.log(res.data);
   };
   useEffect(() => {
     getMedicines();
   }, []);
  const { id } = useParams();
  const product = medicines.find((item) => item.id === String(id));
  const navigate = useNavigate();
  const back = () => {
    navigate(-1);
  };
  if (!product) {
    return (
      <div style={{ padding: 32, textAlign: "center", color: "#888" }}>
        未找到该商品
      </div>
    );
  }

  return (
    <>
      <NavBar onBack={back}>
        <h3
          style={{
            textAlign: "center",
            fontSize: 28,
            fontWeight: 700,
            color: "#3b3b3b",
            letterSpacing: 2,
            marginBottom: 36,
            textShadow: "0 2px 8px rgba(60,60,100,0.08)",
          }}
        >
          商品详情
        </h3>
      </NavBar>
      <div
        style={{
          maxWidth: 480,
          margin: "0 auto",
          background: "#fff",
          borderRadius: 16,
          boxShadow: "0 2px 8px rgba(0,0,0,0.06)",
          padding: 24,
          marginTop: 24,
        }}
      >
        <img
          src={product.image}
          alt={product.name}
          style={{
            width: "100%",
            height: 180,
            objectFit: "contain",
            borderRadius: 12,
            background: "#f6f6f6",
            marginBottom: 16,
          }}
        />
        <div style={{ fontWeight: 600, fontSize: 20, marginBottom: 8 }}>
          {product.name}
        </div>
        <div style={{ color: "#888", fontSize: 15, marginBottom: 8 }}>
          {product.description}
        </div>
        <div
          style={{
            color: "#f40",
            fontWeight: 600,
            fontSize: 22,
            marginBottom: 8,
          }}
        >
          ￥{product.price.toFixed(2)}
        </div>
        <div
          style={{
            color: "#aaa",
            textDecoration: "line-through",
            marginBottom: 8,
          }}
        >
          ￥{(product.price+3).toFixed(2)}
        </div>
        <div style={{ color: "#1a1a1a", fontSize: 14, marginBottom: 8 }}>
          <p>品牌：{product.brand}</p>
          <p>规格：{product.dosage}</p>
          <p>成分：{product.ingredients}</p>
          <p>副作用：{product.sideEffects}</p>
          <p>存储：{product.storage}</p>
          <p>有效期：{product.expiryDate}</p>
        </div>
        <button
          style={{
            width: "100%",
            background: "#19c37d",
            color: "#fff",
            border: "none",
            borderRadius: 8,
            padding: "12px 0",
            fontSize: 18,
            fontWeight: 600,
            marginTop: 16,
            cursor: "pointer",
          }}
          onClick={() => {
            navigate("/list");
          }}
        >
          加入清单
        </button>
      </div>
    </>
  );
}
